<template>
<div>
    <div class="top-content">
    <div class="">00:00:00</div> | 
    <div class="">RoomID:*****</div>
    <div style="margin-left:20px;" class="">Online:**</div>|
    <div class="">Visit LINK</div>
    <div style="margin-left:20px;" class="load">
      <!-- <span class="" @click="loadClick">load</span>
      <div class="ul" :class="{'ul_hide':fold}">
        <ul>
          <li v-for="item in list" @click="loadClick">
              <a href="#/video">{{item}}</a>
          </li>
        </ul>
      </div> -->
       <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        load
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="WhiteBoard" icon="el-icon-plus">White Board</el-dropdown-item>
        <el-dropdown-item command="StreamLiving" icon="el-icon-circle-plus">Stream</el-dropdown-item>
        <el-dropdown-item command="CameraLiving" icon="el-icon-circle-plus-outline">Camera</el-dropdown-item>
        <el-dropdown-item command="Message" icon="el-icon-check">Message</el-dropdown-item>
        <el-dropdown-item command="e" icon="el-icon-circle-check" @click="desktopShare">Desktop Share</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
  </div>

      <el-dialog :modal="modal" title="Desktop Share" :visible.sync="dialogFormVisible">
    <el-form :model="form">
        <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormShare">Share</el-button>
      <el-button @click="dialogFormCanel">cancel</el-button>
      
    </div>
  </el-dialog>
</div>

</template>

<script>
export default {
  name: 'TopContent',
  data () {
    return {
      fold:true,
      modal:false,
      msg: 'Welcome to video',
      list:['White Board','Stream','Camera','Message','Desktop Share'],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
    }
  },
  methods: {
    dialogFormShare(){
        alert('share')
        this.dialogFormVisible = false
    },
    dialogFormCanel() {
      alert('canel')
      this.dialogFormVisible = false
    },
    loadClick() {
      this.fold = !this.fold
    },
    desktopShare() {
      // alert('弹框待开发')
    },
    handleCommand(command){
      if(command == 'e'){
         this.dialogFormVisible = true
      }else{
        this.$router.push({ name: command });
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .top-content {
    padding: 0 20px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .load{
         position: relative;
         .el-dropdown-link{
           color: #ffffff;
         }
      .ul{
        position: absolute;
        top: 60px;
        left: -80px;
        width: 200px;
        color: black;
        ul{
          
        display: flex;
        flex-direction: column;
          li{
            
          }
        }

        // z-index: 3;
      }
      .ul_hide{
        display: none;
      }
    }
  }
</style>
